<template>
  <div class="infinityScroll_list">
    <div :class="['infinityScroll_box', animateKey]">
      <slot name="tmp"></slot>
      <slot name="tmp"></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    animateKey: {
      type: String,
      default: 'infinityScroll'
    },
    speed: {
      type: Number,
      default: 8
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.addStyle()
    })
  },
  methods: {
    init (y) {
      var style = document.createElement('style');
      style.id = 'infinityScroll_' + this.animateKey
      style.type = 'text/css';
      var keyFrames = `
        @-webkit-keyframes ${this.animateKey} {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
            100% {
                -webkit-transform: translate3d(0, ${y}, 0);
                transform: translate3d(0, ${y}, 0);
            }
        }
        @keyframes ${this.animateKey} {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
            100% {
                -webkit-transform: translate3d(0, ${y}, 0);
                transform: translate3d(0, ${y}, 0);
            }
        }
        .infinityScroll_list .${this.animateKey}{
          -webkit-animation: ${this.speed}s rowup linear infinite normal;
          animation: ${this.speed}s ${this.animateKey} linear infinite normal;
          position: relative;
        }
        .infinityScroll_list .${this.animateKey}:hover{
          animation-play-state:paused;
          -webkit-animation-play-state:paused; /* Safari 和 Chrome */
        }
      `;
      style.innerHTML = keyFrames
      if (document.getElementById('infinityScroll_' + this.animateKey))
        document.getElementById('infinityScroll_' + this.animateKey).remove()
      document.getElementsByTagName('head')[0].appendChild(style)
    },
    addStyle () {
      let that = this
      let h = document.querySelector('.infinityScroll_box.' + this.animateKey).offsetHeight / 2;
      if (!h) {
        setTimeout(() => {
          that.addStyle()
        }, 500);
      } else {
        this.init('-' + h + 'px');
      }
    }
  }
}
</script>
<style scoped>
.infinityScroll_list {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>